<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('参展赛事')">

</head>

<body>

<link rel="stylesheet" th:href="${#request.getAttribute('ctx') + '/static/front/css/index/private-custom.css'}">

<div style="height: 100%" id="app">

    <div th:replace="head :: header"></div>

    <!--弹出层-->
    <div class="window">
        <div class="window_bg"></div>
        <div class="window_box window_box_four">
            <img th:src="${#request.getAttribute('ctx') + '/static/front/img/four.png'}" />
            <div class="btn"></div>
        </div>
    </div>

    <div class="banner pc">
        <div>
            <img th:src="${#request.getAttribute('ctx') + '/static/jinpaitoupiao.png'}" style="width: 100%;height: 430px;">
        </div>
    </div>

    <div>
        <div class="container">
            <div class="private_search clearfix">
                <input type="text" v-model="searchWord" placeholder="搜索关键词" />
                <a href="javascript:void(0)" class="search" @click="search"></a>
            </div>
            <div class="container_con">
                <div class="container_div clearfix">
                    <div class="content_info_title">
                        <em></em>
                        <h3>最受欢迎演出音乐投票</h3>
                    </div>
                     <el-cascader placeholder="选择城市" :options="areaData" v-model="address" filterable @change="loadByArea"></el-cascader>
                </div>

                <el-row class="team_row">
                    <div class="my_row" v-for="(item, index) in photographers" stripe>
                        <label><input type="radio" name="photoGrapher" @click="select(1,index)"/></label>
                            <div class="team_border div_row_team" prop="id" label="nickname">
                                <a :href="'/user/detail/' + item.id" target="_blank">

                                    <div class="team_head">
                                        <img class="team_head_img" :src="item.photo"/>
                                    </div>
                                    <div class="team_head_name">{{item.nickname}}</div>
                                    <div class="team_head_name team_head_name_star">
                                        <!--<img style="width:10px;height:10px;"-->
                                             <!--th:src="${#request.getAttribute('ctx') + '/static/front/img/star.png'}" v-for="i in 5"/>-->
                                        <i v-for="i in 5"></i>
                                    </div>
                                    <div class="team_head_info">
                                        <p class="team_head_info_content">{{item.description}}</p>
                                    </div>
                                </a>

                                <div class="bottom clearfix">
                                    <div class="right">
                                        <!--<dl class="production">
                                            <dt><i class="iconfont icon-shipin"></i></dt>
                                            <dd>5300</dd>
                                        </dl>-->
<!--                                        <dl class="icon">-->
<!--                                            <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="1" data-collect-operation="2">-->
<!--                                                <i :class="item.id|Active(collections, 1, 2) ? 'iconfont icon-zanxinxingguanzhu icon-active' : 'iconfont icon-zanxinxingguanzhu'"></i>-->
<!--                                            </dt>-->
<!--                                            <dd>{{item.collectCount|NumberFormat}}</dd>-->
<!--                                        </dl>-->
<!--                                        <dl class="icon">-->
<!--                                            <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="1" data-collect-operation="1">-->
<!--                                                <i :class="item.id|Active(collections, 1, 1) ? 'iconfont icon-dianzan icon-active' : 'iconfont icon-dianzan'"></i>-->
<!--                                            </dt>-->
<!--                                            <dd>{{item.likeCount|NumberFormat}}</dd>-->
<!--                                        </dl>-->
                                    </div>
                                    <div class="left">
                                        <a class="chakan" :href="'/user/detail/' + item.id">查看详情</a>
                                    </div>
                                </div>

                            </div>
                    </div>
                    <div class="window_box window_box_one">
                        <img th:src="${#request.getAttribute('ctx') + '/static/front/img/one.png'}" />
                        <div class="btn" style="left: 40%;"></div>
                        <div class="btn" style="left: 80%;"></div>
                    </div>
                </el-row>

                <div style="display: flex;justify-content: center; height:40px;">
                    <el-pagination
                            @size-change="photographershandleSizeChange"
                            @current-change="photographershandleCurrentChange"
                            :current-page.sync="photographerscurrentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="photographerspageSize"
                            layout="prev, pager, next"
                            :total="photographerstotal">
                    </el-pagination>
                </div>
            </div>


            <div class="container_div clearfix">
                <div class="content_info_title">
                    <em></em>
                    <h3>最受欢迎动漫作品投票</h3>
                </div>
            </div>

            <el-row class="team_row">
                <div class="my_row" v-for="(item, index) in scriptwriters" :key=item.id>
                    <label><input type="radio" name="scriptWriter" @click="select(2,index)"/></label>
                        <div class="team_border div_row_team" prop="id" label="nickname">
                            <a :href="'/user/detail/' + item.id" target="_blank">

                                <div class="team_head">
                                    <img class="team_head_img" :src="item.photo"/>
                                </div>
                                <div class="team_head_name">{{item.nickname}}</div>
                                <div class="team_head_name team_head_name_star">
                                    <!--<img style="width:10px;height:10px;"-->
                                         <!--th:src="${#request.getAttribute('ctx') + '/static/front/img/star.png'}" v-for="i in 5"/>-->
                                    <i v-for="i in 5"></i>
                                </div>
                                <div class="team_head_info">
                                    <p class="team_head_info_content">{{item.description}}</p>
                                </div>
                            </a>

                            <div class="bottom clearfix">
                                <div class="right">
                                    <!--<dl class="production">
                                        <dt><i class="iconfont icon-shipin"></i></dt>
                                        <dd>5300</dd>
                                    </dl>-->
<!--                                    <dl class="icon">-->
<!--                                        <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="1" data-collect-operation="2">-->
<!--                                            <i :class="item.id|Active(collections, 1, 2) ? 'iconfont icon-zanxinxingguanzhu icon-active' : 'iconfont icon-zanxinxingguanzhu'"></i>-->
<!--                                        </dt>-->
<!--                                        <dd :class="item.id|Active(collections, 1, 2) ? 'icon-active' : ''">{{item.collectCount|NumberFormat}}</dd>-->
<!--                                    </dl>-->
<!--                                    <dl class="icon">-->
<!--                                        <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="1" data-collect-operation="1">-->
<!--                                            <i :class="item.id|Active(collections, 1, 1) ? 'iconfont icon-dianzan icon-active' : 'iconfont icon-dianzan'"></i>-->
<!--                                        </dt>-->
<!--                                        <dd :class="item.id|Active(collections, 1, 1) ? 'icon-active' : ''">{{item.likeCount|NumberFormat}}</dd>-->
<!--                                    </dl>-->
                                </div>
                                <div class="left">
                                    <a class="chakan" :href="'/user/detail/' + item.id">查看详情</a>
                                </div>
                            </div>

                        </div>
                </div>
                <div class="window_box window_box_two">
                    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/two.png'}" />
                    <div class="btn"></div>
                </div>
            </el-row>

            <div style="display: flex;justify-content: center;">
                <el-pagination
                        @size-change="scriptwritershandleSizeChange"
                        @current-change="scriptwritershandleCurrentChange"
                        :current-page.sync="scriptwriterscurrentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="scriptwriterspageSize"
                        layout="prev, pager, next"
                        :total="scriptwriterstotal">
                </el-pagination>
            </div>

            <div class="container_div clearfix">
                <div class="content_info_title">
                    <em></em>
                    <h3>最受欢迎网络表演投票</h3>
                </div>
            </div>

            <el-row class="team_row">
                <div class="my_row" v-for="(item, index) in scriptwriters" :key=item.id>
                    <label><input type="radio" name="scriptWriter" @click="select(2,index)"/></label>
                    <div class="team_border div_row_team" prop="id" label="nickname">
                        <a :href="'/user/detail/' + item.id" target="_blank">

                            <div class="team_head">
                                <img class="team_head_img" :src="item.photo"/>
                            </div>
                            <div class="team_head_name">{{item.nickname}}</div>
                            <div class="team_head_name team_head_name_star">
                                <!--<img style="width:10px;height:10px;"-->
                                <!--th:src="${#request.getAttribute('ctx') + '/static/front/img/star.png'}" v-for="i in 5"/>-->
                                <i v-for="i in 5"></i>
                            </div>
                            <div class="team_head_info">
                                <p class="team_head_info_content">{{item.description}}</p>
                            </div>
                        </a>

                        <div class="bottom clearfix">
                            <div class="right">
                                <!--<dl class="production">
                                    <dt><i class="iconfont icon-shipin"></i></dt>
                                    <dd>5300</dd>
                                </dl>-->
                                <!--                                    <dl class="icon">-->
                                <!--                                        <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="1" data-collect-operation="2">-->
                                <!--                                            <i :class="item.id|Active(collections, 1, 2) ? 'iconfont icon-zanxinxingguanzhu icon-active' : 'iconfont icon-zanxinxingguanzhu'"></i>-->
                                <!--                                        </dt>-->
                                <!--                                        <dd :class="item.id|Active(collections, 1, 2) ? 'icon-active' : ''">{{item.collectCount|NumberFormat}}</dd>-->
                                <!--                                    </dl>-->
                                <!--                                    <dl class="icon">-->
                                <!--                                        <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="1" data-collect-operation="1">-->
                                <!--                                            <i :class="item.id|Active(collections, 1, 1) ? 'iconfont icon-dianzan icon-active' : 'iconfont icon-dianzan'"></i>-->
                                <!--                                        </dt>-->
                                <!--                                        <dd :class="item.id|Active(collections, 1, 1) ? 'icon-active' : ''">{{item.likeCount|NumberFormat}}</dd>-->
                                <!--                                    </dl>-->
                            </div>
                            <div class="left">
                                <a class="chakan" :href="'/user/detail/' + item.id">查看详情</a>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="window_box window_box_two">
                    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/two.png'}" />
                    <div class="btn"></div>
                </div>
            </el-row>

            <div style="display: flex;justify-content: center;">
                <el-pagination
                        @size-change="scriptwritershandleSizeChange"
                        @current-change="scriptwritershandleCurrentChange"
                        :current-page.sync="scriptwriterscurrentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="scriptwriterspageSize"
                        layout="prev, pager, next"
                        :total="scriptwriterstotal">
                </el-pagination>
            </div>

        </div>
        <div class="private_btnwrap" style="display: flex; justify-content: center;">
            <div class="personalBtn">
                <div class="window_box window_box_three">
                    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/three.png'}" />
                    <div class="btn"></div>
                </div>
                <a class="pc" href="javascript:void(0);" @click="order"><p>比赛投票</p></a>
            </div>
        </div>

        <div th:replace="foot :: body"></div>
    </div>
</div>

</body>

<script th:src="${#request.getAttribute('ctx') + '/static/common/jquery.cookie.js'}"></script>

<script type="text/javascript">
    /**
     * 缓存标志
     * @type {}
     */
    var COOKIE_NAME = {
        SHOW_HELP: "show-help"
    };

    $(document).ready(function() {
        if ($.cookie(COOKIE_NAME.SHOW_HELP) == 'true') {
            $(".window").show();
            $(".window_box_one").show();
            $.cookie(COOKIE_NAME.SHOW_HELP, 'false', {expires: 7});
        } else {
            $(".window").hide();
            $(".window_box_one").hide();
            $(".message_item_bz").show();
        }

        $('.private_search').bind('keyup', function (event) {
            if (event.keyCode == 13) {
                v.search();
            }
        });
    });
</script>

<script th:inline="javascript">

    var photographers = [[${photographers.list}]];
    for (var i in photographers) {
        photographers[i].photo = uploadServer + photographers[i].photo;
        photographers[i].mobilePhoto = uploadServer + photographers[i].mobilePhoto;
    }

    var scriptwriters = [[${scriptwriters.list}]];
    for (var i in scriptwriters) {
        scriptwriters[i].photo = uploadServer + scriptwriters[i].photo;
        scriptwriters[i].mobilePhoto = uploadServer + scriptwriters[i].mobilePhoto;
    }

    var areas = [[${areas}]];
    var areaData = new Array();
    for (var i in areas) {
        areaData.push({
            label: areas[i].name,
            value: areas[i].id
        })
    }

    var func;

    var v = new Vue({
        el: '#app',
        data: {
            searchWord: '',
            selected: [,],
            address: null,

            areaData: areaData,

            collections: [[${collects}]],

            photographers: photographers,
            photographerscurrentPage: [[${photographers.pageNum}]],
            photographerstotal: [[${photographers.total}]],
            photographerspageSize: [[${photographers.pageSize}]],

            scriptwriters: scriptwriters,
            scriptwriterscurrentPage: [[${scriptwriters.pageNum}]],
            scriptwriterstotal: [[${scriptwriters.total}]],
            scriptwriterspageSize: [[${scriptwriters.pageSize}]],

            loading: false
        },
        created: function () {

        },
        methods: {
            load: function (type, url) {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: url,
                    beforeSend: function () {
                        _self.loading = true;
                    },
                    dataType: 'json',
                    success: function (result) {
                        for (var i in result.data.list) {
                            result.data.list[i].photo = uploadServer + result.data.list[i].photo;
                            result.data.list[i].mobilePhoto = uploadServer + result.data.list[i].mobilePhoto;
                        }
                        if (type == 'photographer') {
                            _self.photographers = result.data.list;
                            _self.photographerscurrentPage = result.data.pageNum;
                            _self.photographerstotal = result.data.total;
                        } else {
                            _self.scriptwriters = result.data.list;
                            _self.scriptwriterscurrentPage = result.data.pageNum;
                            _self.scriptwriterstotal = result.data.total;
                        }

                        _self.loading = false;

                        // bindCollectEvent();
                    },
                    error: function (e) {

                    }
                })
            },

            loadByArea: function (data) {
                var _self = this;
                clearTimeout(func);
                func = setTimeout(function () {
                    var url = [[${ctx}]] + "/user/api/list?pageNum=" + _self.photographerscurrentPage + "&pageSize=" + _self.photographerspageSize + '&type=4&address=' + data[data.length - 1];
                    _self.load('photographer', url);
                }, 500);
            },

            photographershandleSizeChange: function(val) {
                this.photographerspageSize = val;
                var url = [[${ctx}]] + "/user/api/list?pageNum=" + this.photographerscurrentPage + "&pageSize=" + this.photographerspageSize + '&type=4';
                this.load('photographer', url);
            },
            photographershandleCurrentChange: function(val) {
                this.photographerscurrentPage = val;
                var url = [[${ctx}]] + "/user/api/list?pageNum=" + this.photographerscurrentPage + "&pageSize=" + this.photographerspageSize + '&type=4';
                this.load('photographer', url);
                $('html,body').animate({scrollTop: $($('h3')[1]).offset().top});
                // 解决翻页后checkbox选中状态仍然存在的问题
                this.select[0] = null;
                $('input[name="photoGrapher"]').each(function() {
                    $(this).attr('checked', false);
                    $(this).parent().parent().removeClass('on');
                    $(this).parent().parent().siblings('.my_row').removeClass('on');
                });
            },

            scriptwritershandleSizeChange: function(val) {
                this.scriptwriterspageSize = val;
                var url = [[${ctx}]] + "/user/api/list?pageNum=" + this.scriptwriterscurrentPage + "&pageSize=" + this.scriptwriterspageSize + '&type=5';
                this.load('scriptwriter', url);
            },
            scriptwritershandleCurrentChange: function(val) {
                this.scriptwriterscurrentPage = val;
                var url = [[${ctx}]] + "/user/api/list?pageNum=" + this.scriptwriterscurrentPage + "&pageSize=" + this.scriptwriterspageSize + '&type=5';
                this.load('scriptwriter', url);
                $('html,body').animate({scrollTop: $($('h3')[2]).offset().top});
                // 解决翻页后checkbox选中状态仍然存在的问题
                this.select[1] = null;
                $('input[name="scriptWriter"]').each(function() {
                    $(this).attr('checked', false);
                    $(this).parent().parent().removeClass('on');
                    $(this).parent().parent().siblings('.my_row').removeClass('on');
                });
            },

            search: function() {
                var _self = this;
                clearTimeout(func);
                func = setTimeout(function () {
                    var url = [[${ctx}]] + "/user/api/list?pageNum=" + _self.photographerscurrentPage + "&pageSize=" + _self.photographerspageSize + '&type=4&address=' + (_self.address != null ? _self.address : '') + '&nickname=' + (_self.searchWord != null ? _self.searchWord : '');
                    _self.load('photographer', url);
                }, 500);
            },

            select: function(type, index) {
                var _self = this;
                if (type == 1) {
                    _self.selected[0] = _self.photographers[index].id;
                }
                if (type == 2) {
                    _self.selected[1] = _self.scriptwriters[index].id;
                }
            },

            order: function () {
                if (!this.selected[0]) {
                    ELEMENT.Message.info('请选择摄影师');
                    return false;
                }
                if (!this.selected[1]) {
                    ELEMENT.Message.info('请选择编剧');
                    return false;
                }
                window.open('/order/ready/2?photoGrapher=' + this.selected[0] + '&scriptWriter=' + this.selected[1], '_blank');
            }
        }
    })
</script>
</html>